html {
    font-size: 98px;
}

#rabbit_box{

    position: fixed;
    /* bottom: var(--pos,5%); */
    top: 50%;
    left: 50%;
    transform: translate(-35%, 0%);
    z-index: 99;
    /* border: none; */
    /* outline: none; */
    filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));

}

.rabbit .rabbit__body {
    width: 4rem;
    height: 5.6rem;
    background: #F4F4F4;
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
    transform: rotate(-40deg);
    box-shadow: inset -2.3em -2.7em 0 0 var(--theme-color,#D2DAEE);
}

.rabbit .rabbit__head {
    position: absolute;
    width: 4rem;
    height: 4.6rem;
    top: -2.5rem;
    left: -2rem;
    background: var(--theme-color,#e1e6f4);
    border-radius: 50% 50% 50% 50%/65% 60% 40% 35%;
    transform: rotate(-120deg);
    overflow: hidden;
}
.rabbit .rabbit__head:before {
    content: "";
    position: absolute;
    width: 0.65rem;
    height: 0.5rem;
    top: -0.1rem;
    left: 1.8rem;
    background: #F97996;
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
    transform: rotate(130deg);
}
.rabbit .rabbit__head:after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 1.5rem;
    left: 1.6rem;
    background: #F4F4F4;
    border-radius: 50%;
    box-shadow: inset 0.1em 0.15em 0 0.37em #e2262e;
}

.rabbit .rabbit__ear {
    position: absolute;
    border-radius: 50% 50% 50% 50%/40% 40% 60% 60%;
    transform-origin: 50% 100%;
}
.rabbit .rabbit__ear--left {
    width: 2.2rem;
    height: 4.7rem;
    top: -5.7rem;
    left: -0.2rem;
    background: #F3E3DE;
    transform: rotate(60deg);
    box-shadow: inset 0.3em -0.4em 0 -0.1em var(--theme-color,#c7d1ea);
    -webkit-animation: ear-left 3s infinite ease-out;
    animation: ear-left 3s infinite ease-out;
}
.rabbit .rabbit__ear--right {
    width: 2rem;
    height: 4.7rem;
    top: -5.5rem;
    left: -0.7rem;
    background: var(--theme-color,#D2DAEE);
    transform: rotate(20deg);
    -webkit-animation: ear-right 3s infinite ease-out;
    animation: ear-right 3s infinite ease-out;
}

@-webkit-keyframes ear-left {
    0%, 20%, 100% {
        transform: rotate(40deg);
    }
    10%, 30%, 80% {
        transform: rotate(45deg);
    }
    90% {
        transform: rotate(50deg);
    }
}

@keyframes ear-left {
    0%, 20%, 100% {
        transform: rotate(40deg);
    }
    10%, 30%, 80% {
        transform: rotate(45deg);
    }
    90% {
        transform: rotate(50deg);
    }
}
@-webkit-keyframes ear-right {
    0%, 20%, 100% {
        transform: rotate(10deg);
    }
    10%, 30%, 80% {
        transform: rotate(5deg);
    }
    90% {
        transform: rotate(0deg);
    }
}
@keyframes ear-right {
    0%, 20%, 100% {
        transform: rotate(10deg);
    }
    10%, 30%, 80% {
        transform: rotate(5deg);
    }
    90% {
        transform: rotate(0deg);
    }
}


.rabbit .rabbit__leg {
    position: absolute;
}
.rabbit .rabbit__leg--one {
    width: 0.8rem;
    height: 3rem;
    top: 2.3rem;
    left: 0.2rem;
    background: var(--theme-color,#c7d1ea);
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
    transform-origin: 50% 0%;
    transform: rotate(15deg);
}
.rabbit .rabbit__leg--one:before {
    content: "";
    position: absolute;
    width: 0.8rem;
    height: 0.5rem;
    top: 2.6rem;
    left: -0.2rem;
    background: #f3f6ff;
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
    transform: rotate(-10deg);
}
.rabbit .rabbit__leg--three {
    width: 0.9rem;
    height: 3rem;
    top: 2.4rem;
    left: 0.7rem;
    background: var(--theme-color,#e1e6f4);
    border-radius: 50% 50% 50% 50%/30% 30% 70% 70%;
    transform-origin: 50% 0%;
    transform: rotate(10deg);
}
.rabbit .rabbit__leg--three:before {
    content: "";
    position: absolute;
    width: 0.8rem;
    height: 0.5rem;
    top: 2.6rem;
    left: -0.2rem;
    background: #f3f6ff;
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
    transform: rotate(-10deg);
}
.rabbit .rabbit__leg--two {
    width: 2.6rem;
    height: 3.6rem;
    top: 1.7rem;
    left: 1.6rem;
    background: #c7d1ea;
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
    transform-origin: 50% 0%;
    transform: rotate(10deg);
}
.rabbit .rabbit__leg--two:before {
    content: "";
    position: absolute;
    width: 1.6rem;
    height: 0.8rem;
    top: 3.05rem;
    left: 0rem;
    background: #f3f6ff;
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
    transform: rotate(-10deg);
}
.rabbit .rabbit__leg--four {
    width: 2.6rem;
    height: 3.6rem;
    top: 1.8rem;
    left: 2.1rem;
    background: var(--theme-color,#e1e6f4);
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
    transform-origin: 50% 0%;
    transform: rotate(10deg);
}
.rabbit .rabbit__leg--four:before {
    content: "";
    position: absolute;
    width: 1.6rem;
    height: 0.8rem;
    top: 3.05rem;
    left: 0rem;
    background: #f3f6ff;
    border-radius: 50% 50% 50% 50%/70% 70% 30% 30%;
    transform: rotate(-10deg);
}
.rabbit .rabbit__tail {
    position: absolute;
    width: 0.9rem;
    height: 0.9rem;
    top: 3.7rem;
    left: 4rem;
    background: var(--theme-color,#D2DAEE);
    transform: rotate(25deg);
}
.rabbit .rabbit__tail:after, .rabbit .rabbit__tail:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--theme-color,#D2DAEE);
    border-radius: 50%;
}
.rabbit .rabbit__tail:before {
    top: 0;
    left: -50%;
}
.rabbit .rabbit__tail:after {
    top: 50%;
    left: 0;
}